<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/web/header.jsp"%>
<title>echart-a</title>
<!-- <script src="/company/web/common/js/echarts.min.js"></script> -->
<!-- <script src="/company/web/common/js/jquery-3.4.1.min.js"></script> -->
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 900px; height: 550px;"></div>
    <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));
    	$.post(
    		'${path}/department?method=selectDepartmentCount',
    		function(jsonResult) {
    			// ArrayList<DepartmentCount> list;
    			// 把所有部门的名字放到一个数组里面，设置到x轴
 				var nameArray = new Array();
    			// 把所有的人数放到一个数组里面，设置到y轴
    			var countArray = new Array();
 	            $.each(jsonResult.data,function(){
 	            	nameArray.push(this.name)
 		            countArray.push(this.count)
 	            })
 				//指定图表的配置项和数据
 				var option = {
 				    title : {text : '部门人数'},
 				    xAxis : {type : 'category',data : nameArray},
 				    yAxis : {type : 'value'},
 				    series : [ {data : countArray, type : 'bar'} ]
 				};
          		// 使用刚指定的配置项和数据显示图表。
 	        	myChart.setOption(option);
    		},
    		'json'
    	);
    </script>
</body>
</html>